Jak interaktywnie komunikować się z bazą danych? [Ajax, PHP, MySQL]

Zwykle skrypty pobierają dane z bazy i wyświetlają je w pożądanej formie na internetowej stronie. Potem użytkownik ogląda to, co skrypt pobrał – jeśli chce zobaczyć coś innego, trzeba przeładować stronę, podając inne parametry do kwerendy do bazy. Można jednak dzięki Ajaksowi łatwo zaoszczędzić sobie przeładowywania.

Strona internetowa może dynamicznie pobierać dane z bazy, korzystając z obiektu XHR (XMLHttpRequest). Zobaczmy jak to się robi na przykładzie prostej listy części:

Tworzymy stronę z formularzem HTML. Będzie ona wczytywała kod w JavaScripcie zajmujący się obsługą XHR i łączący się z działającym po stronie serwera skryptem PHP.

<html>
 <head>
 <script type="text/javascript" src="wybor.js"></script>
</head>
<body>

<form>
<strong>Wybierz część</strong>
<select name="rekord" onchange="showPart(this.value)">
 <option value="1">Lusterko</option>
 <option value="2">Opony letnie</option>
 <option value="3">Katalizator</option>
</select>
</form>
<br />
<div id="informacja">Opis wybranej części:</div>

</body>
</html>

Strona HTML z selektorem.

Za każdym razem, kiedy użytkownik wybierze dane (zdarzenie onchange) wykonywana jest funkcja showPart(); zdefiniowana w skrypcie wybor.js.

var xmlhttp;

function showPart(str)
{
xmlhttp=GetXmlHttpObject();
var url="baza.php";
url=url+"?part="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("informacja").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
 {
 return new XMLHttpRequest();
 }
return null;
}

Skrypt wybor.js

Funkcja showPart wywołuje funkcję GetXmlHttpObject (służącą do utworzenia obiektu XMLHTTP, definiuje adres, na który ma być on wysłany do serwera, dopisuje do URL wywołania parametr wybrany w selektorze i dodaje do niego losowy numer, żeby nie powielać danych z cache.

Teraz za każdym razem, gdy dochodzi do zmiany własności readyState, wykonywana jest funkcja stateChanged(). Kiedy wartość wyniesie „4” – funkcja wypełni kontener div o identyfikatorze „informacja” danymi pobranymi z bazy.

«poprzednia 1 2 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

skomentuj »